<!DOCTYPE html>
<!-- saved from url=(0060)http://fantaghiro.github.io/miaov/JS_Basic_Lessons/11-1.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>查找、替换、删除</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
			background: #EFEFE7;
		}
		p {
			background: #fff;
			width: 600px;
			padding: 50px;
			font-family: '微软雅黑';
			font-size: 22px;
			line-height: 36px;
		}
		#wrap {
			width: 800px;
			margin: 50px auto;
			position: relative;
		}
		#buttons {
			width: 100px;
			position: absolute;
			right: 0;
			top: 0;
		}
		#buttons a {
			display: block;
			text-decoration: none;
			margin-bottom: 5px;
			color: #fff;
			width: 100px;
			height: 40px;
			line-height: 40px;
			background: #C0C0C0;
			text-align: center;
			display: none;
			font-weight: bold;
			font-family: '微软雅黑';
			font-size: 20px;
		}
		#buttons a:hover {
			background: #E76308;
		}
		#buttons a:first-child {
			background: #94948C;
			display: block;
		}
		#toolbox {
			border: 10px solid #E71063;
			width: 640px;
			padding: 20px;
			background: #E7E7B5;
			font-size: 0;
			display: none;
			position: relative;
		}
		#toolbox span {
			font-family: '微软雅黑';
			font-size: 20px;
			padding: 5px 20px;
			cursor: pointer;
		}
		#toolbox span.active {
			background: #E73100;
			color: #fff;
		}
		#search, #replace {
			border-top: 3px solid #F7634A;
			margin-top: 3px;
		}
		#search input[type="text"], #replace input[type="text"] {
			margin: 20px 0px;
			padding: 2px;
			height: 24px;
			width: 200px;
			font-size: 24px;
			margin-right: 10px;
		}
		#search input[type="button"], #replace input[type="button"] {
			margin: 20px 0;
			height: 30px;
			width: 56px;
			font-size: 20px;
		}
		#close {
			font-size: 24px;
			position: absolute;
			right: 10px;
			top: 10px;
			cursor: pointer;
		}
	</style><style type="text/css" adt="123"></style><style type="text/css" adt="123"></style>
	<script>
		window.onload = function(){
			var aBtn = document.getElementById('buttons').getElementsByTagName('a'),
				oToolbox = document.getElementById('toolbox'),
				oSearch = document.getElementById('search'),
				oReplace = document.getElementById('replace'),
				aSpan = oToolbox.getElementsByTagName('span'),
				searchBtn = oSearch.getElementsByTagName('input')[1],
				replaceBtn = oReplace.getElementsByTagName('input')[2],
				searchInput = oSearch.getElementsByTagName('input')[0],
				replaceInputs = oReplace.getElementsByTagName('input'),
				oClose = document.getElementById('close'),
				oP = document.getElementsByTagName('p')[0],
				str = oP.innerHTML;

			aBtn[0].onclick = function(){
				aBtn[1].style.display = 'block';
				aBtn[2].style.display = 'block';
			}
			aBtn[1].onclick = function(){
				clearBtns();
				searchShow();

			}
			aBtn[2].onclick = function(){
				clearBtns();
				replaceShow();
			}
			aSpan[0].onclick = searchShow;
			aSpan[1].onclick = replaceShow;
			oClose.onclick = function(){
				oToolbox.style.display = 'none';
			}
			function searchShow(){
				oP.innerHTML = str;
				aSpan[0].className = 'active';
				aSpan[1].className = '';
				oSearch.style.display = 'block';
				oReplace.style.display = 'none';
			}
			function replaceShow(){
				oP.innerHTML = str;
				aSpan[1].className = 'active';
				aSpan[0].className = '';
				oSearch.style.display = 'none';
				oReplace.style.display = 'block';
			}
			function clearBtns(){
				aBtn[1].style.display = 'none';
				aBtn[2].style.display = 'none';
				oToolbox.style.display= 'block';
			}
			searchBtn.onclick = function(){
				if(!searchInput.value){
					alert('请输入要查找的内容');
					oP.innerHTML = str;
				} else {
					if (str.indexOf(searchInput.value) == -1) {
						alert('对不起，没有找到您输入的【' + searchInput.value + '】');
						oP.innerHTML = str;
						searchInput.value = '';
					} else {
						oP.innerHTML = str;
						var arr = str.split(searchInput.value);
						oP.innerHTML = arr.join('<span style="background: yellow">' + searchInput.value + '</span>');
						searchInput.value = '';
					}
				}
				
			}
			replaceBtn.onclick = function(){
				if(!replaceInputs[0].value){
					alert('请输入要替换的内容');
					oP.innerHTML = str;
				} else {
					if (str.indexOf(replaceInputs[0].value) == -1) {
						alert('对不起，没有找到您输入的【' + replaceInputs[0].value + '】');
					} else {
						if (!replaceInputs[1].value) {
							if(!confirm('您确定要删除输入的内容吗？')){
								replaceInputs[0].value = '';
								return;
							}
						} 
						oP.innerHTML = str;
						var arr = str.split(replaceInputs[0].value);
						oP.innerHTML = arr.join( replaceInputs[1].value);
						str = oP.innerHTML;
						replaceInputs[0].value = '';
						replaceInputs[1].value = '';
					}
				}
				
			}

		}
	</script>
</head>
<body>
	<div id="wrap">
		<p>妙味课堂是一支充满温馨并且极富人情味的IT培训团队；2010-2011年，妙味深度关注WEB前端开发领域，为此精心研发出一套灵活而充满趣味的JavaScript课程。2011-2013年，妙味精准研发出最新HTML5\CSS3课程，并推出远程培训课程方案，尝试将线下优良的培训模式移植到远程网络培训中，希望尽最大努力，将一种快乐愉悦的授课体验、结合HTML\CSS\JS知识点，精准传递给妙味课堂的每一位学员。</p>
		<div id="buttons">
			<a href="javascript:">展开</a>
			<a href="javascript:">查找</a>
			<a href="javascript:">替换</a>
		</div></div><div id="__nightingale_view_cover" style="width: 100%; height: 100%; transition: -webkit-transform 10s ease-in-out; position: fixed !important; left: 0px !important; bottom: 0px !important; overflow: hidden !important; pointer-events: none !important; z-index: 2147483647; opacity: 0; background: rgb(0, 0, 0) !important;"></div></body></html>